<script setup lang='ts'>
  import { reactive, computed, watch } from 'vue';
  import { guild_roomApi } from '@/api/controller'
  const props = defineProps({
    room_id:{
      type:[Number,String],
      default:''
    },
    room_uid:{
      type:[Number,String],
      default:''
    }
  })
  const uuid = computed({
    get(){
      return props.room_id
    },
    set(val){
      return val
    }
  })
  // watch(props,()=>{
  //   console.log(props);
  //   if(!props.room_id && !props.room_uid) action.room_id = ''
  // })
  const $emit = defineEmits(['update:room_id','update:room_uid'])
  const action = reactive({
    loading:false,
    room_id:'',
    options:[] as Array<any>
  })
  const remoteMethod = (query:any='')=>{
    console.log(query);
    if(!query || query.length < 5) return
    action.options = []
    action.loading = true
    guild_roomApi.getRoomInfo({room_uid:query}).then(res=>{
      action.loading = false
      const { data=[] } = res
      action.options = data
    })
  }
  const selectChange = (room_id:any='')=>{
    if(room_id == 'clear') {
      emitQuery()
      return
    }
    if(room_id) {
      const userinfo = action.options.find(res=>res.room_id == room_id)
      const { room_uid='' } = userinfo || {finance_wallet:{},uuid:''}
      emitQuery({
        room_id,
        room_uid,
      })
    }
  }
  const emitQuery = (query:any={})=>{
    const { room_id='', room_uid='' } = query
    $emit('update:room_id',room_id)
    $emit('update:room_uid',room_uid)
  }
</script>

<template>
  <el-select
    v-model="uuid"
    filterable
    remote
    placeholder="请输入房间UID"
    value-key="room_id"
    clearable
    :remote-method="remoteMethod"
    :loading="action.loading"
    @change="selectChange"
    @clear="selectChange('clear')">
    <el-option
      v-for="item in action.options"
      :key="item.room_id"
      :label="`房间UID:${item.room_uid} \xa0\xa0\xa0\xa0 房间：${item.name}`"
      :value="item.room_id">
    </el-option>
  </el-select>
</template>